<template>
	<view>
		<u-sticky offset-top="0">
			<fui-segmented-control size="25" :values="[{id:1,name:'按住往下拉显示历史赛事信息'}]"
				color="#5AC725"></fui-segmented-control>
			<fui-tabs :scroll="true" :center="true" :tabs="topLevel" @change="clickTopLevel"></fui-tabs>
			<fui-tabs-two :scroll="true" :center="true" :tabs="twoLevel" @change="clickTwoLevel"></fui-tabs-two>

		</u-sticky>
		<view v-for="(item, index) in matchdata" :key="index">
			<u-subsection :fontSize="13"
				:list="[(item.starttimeStr === currentdate ? '今天' : item.starttimeStr) + ' ' + item.starttimeWeek + ' ' + item.twoLevelClassName]"
				:current="1">
			</u-subsection>
			<view v-for="(matchitem, matchindex) in item.children" :key="matchindex" >
				<view class="matchbox">
					<view class="matchtitle">
						<view
							:class="matchitem.teamascore === 0 && matchitem.teambscore === 0 ? 'tipnotstart' : 'tipstart'">
							{{ endOrNot(matchitem.teamascore,matchitem.teambscore,matchitem.starttime) }}
						</view>
						<view class="matchName">
							{{matchitem.starttimeHour}} {{matchitem.starttimeWeek}}
						</view>
						<view class="matchTime">
							<!-- {{matchitem.starttime.substring(0, 10) }} --> <!-- {{matchitem.className}} -->
							<u-button @click="subscriptionClick(index,matchindex,matchitem.starttime,matchitem.id)"
								:disabled="showSubscription(matchitem.starttime,matchitem.subscription)" type="success"
								size="mini">订阅提醒</u-button>


						</view>
					</view>
					<view class="matchContent" @click="setupClick(matchitem)">
						<view class="leftMatch">
							<view class="imgcenter">
								<u-image mode="aspectFit" width="70rpx" height="60rpx" class="matchimg"
									:src="matchitem.teamaLogo"></u-image>
							</view>
							<view class="textimg">
								<u--text :text="matchitem.teamaName" align="center" size="15"></u--text>
							</view>
						</view>
						<view class="tvIcon">
							<view class="upIcon">
								<view>
									<u-image mode="aspectFit" width="70rpx" height="52rpx" class="tvImg"
										:src="matchitem.watchLogo"></u-image>
								</view>
								<view class="channel">
									{{matchitem.watchName}}
								</view>
							</view>
							<view class="notDo">
								<u-text :text="showScore(matchitem.teamascore,matchitem.teambscore,matchitem.starttime)"
									align="center" size="18" color="rgba(128, 128, 128, 1)"></u-text>
							</view>
						</view>
						<view class="rightMatch">
							<view class="imgcenter">
								<u-image mode="aspectFit" width="70rpx" height="60rpx" class="matchimg"
									:src="matchitem.teambLogo"></u-image>
							</view>

							<view class="textimg">
								<u--text :text="matchitem.teambName" size="15" align="center"></u--text>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 	<u-popup :show="popupshow" mode="center">
			<view>
				<u-form ref="uForm">
					<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
						<u--input v-model="updateFractionForm.teamascore" border="none"></u--input>
					</u-form-item>
					<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
						<u--input v-model="updateFractionForm.teambscore" border="none"></u--input>
					</u-form-item>
				</u-form>
			</view>
		</u-popup> -->
		<u-modal :show="modalshow" title="修改比分" @confirm="modalConfirm" @cancel="modalCancel" :showConfirmButton="true"
			:showCancelButton="true">
			<view>
				<u-form ref="uForm">
					<u-form-item label="队一" borderBottom>
						<u-number-box v-model="updateFractionForm.teamascore" integer :min="0"></u-number-box>
						<!-- <u-input type="number" v-model="updateFractionForm.teamascore" ></u-input> -->
					</u-form-item>
					<u-form-item label="队二" borderBottom>
						<u-number-box v-model="updateFractionForm.teambscore" integer :min="0"></u-number-box>
						<!-- <u-input type="number" v-model="updateFractionForm.teambscore" ></u-input> -->
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
		<uni-load-more :status="status" :contentText="contentText" v-if="ifBottomRefresh"></uni-load-more>
		<tab-bar :current="1"></tab-bar>
	</view>
</template>

<script>
	import {
		getTopLevelListApi,
		getTwoLevelListApi,
		getSubordinatelListApi
	} from '@/api/classify.js'
	import {
		getLatelyScheduleApi,
		getLeadingMatchPageListApi,
		getTemplateIdApi,
		createdSendMessageApi,
		updateFractionApi
	} from '@/api/match.js'
	import fuiTabs from "@/components/fui-tabs/fui-tabs.vue"
	import fuiTabsTwo from "@/components/fui-tabs-two/fui-tabs-two.vue"
	import fuiSegmentedControl from "@/components/fui-segmented-control/fui-segmented-control.vue"
	import {
		IsLogin
	} from '@/common/Token.js'
	export default {
		name: 'Match',
		components: {
			fuiTabs,
			fuiTabsTwo,
			fuiSegmentedControl
		},
		data() {
			//一级分类数据
			const topLevel = []
			//二级分类数据
			const twoLevel = []
			//一级栏目
			const topLevelId = 0
			//二级栏目 
			const twoLevelId = 0
			//最近的赛程日期
			const starttime = ""
			//页面触底的分页查询对象
			const reachHttpPagePar = {
				pageNum: 1,
				pageSize: 8,
				orderBys: ['starttime asc'],
				conditionalList: []
			}
			//下拉刷新的分页查询对象
			const pullHttpPagePar = {
				pageNum: 0,
				pageSize: 3,
				orderBys: ['starttime desc'],
				conditionalList: []
			}
			//比赛数据
			const matchdata = []
			//触底相关
			const ifBottomRefresh = false
			const status = 'more'
			const contentText = {
				contentdown: '上拉加载更多~',
				contentrefresh: '加载中',
				contentnomore: '没有更多数据了'
			}
			//下拉刷新是否还有数据
			const ispulldata = true
			//当前的年月日
			const currentdate = ''
			const updateFractionForm = {
				id: 0,
				teamascore: 0,
				teambscore: 0
			}
			const modalshow = false
			const tempmatchitem = {}
			return {
				topLevel,
				twoLevel,
				topLevelId,
				twoLevelId,
				starttime,
				reachHttpPagePar,
				pullHttpPagePar,
				matchdata,
				ifBottomRefresh,
				status,
				contentText,
				ispulldata,
				currentdate,
				modalshow,
				updateFractionForm,
				tempmatchitem
			}
		},
		computed: {
			topLevelIsScrollable() {
				return this.topLevel.length <= 5 ? false : true
			},
			twoLevelIsScrollable() {
				return this.twoLevel.length <= 3 ? false : true
			}
		},
		methods: {
			//判断比赛是否结束
			endOrNot(teamascore, teambscore, starttime) {
				//获取当前时间
				const attimestamp = BigInt(new Date().getTime().toString())
				//取比赛时间
				const starttimetamp = BigInt(new Date(starttime).getTime())
				//当前时间是否大于比赛时间
				const ifks = attimestamp > starttimetamp
				//比分都等于0并且比赛已经开始
				if (teamascore === 0 && teambscore === 0 && ifks) {
					return "已开始"
				} else if (teamascore === 0 && teambscore === 0 && !ifks) {
					return "未开始"
				} else {
					return "已结束"
				}
			},
			//显示比分
			showScore(teamascore, teambscore, starttime) {
				//获取当前时间
				const attimestamp = BigInt(new Date().getTime().toString())
				//取比赛时间
				const starttimetamp = BigInt(new Date(starttime).getTime())
				//当前时间是否大于比赛时间
				const ifks = attimestamp > starttimetamp
				//比分都等于0并且比赛已经开始
				if (teamascore === 0 && teambscore === 0 && ifks) {
					return "已开始"
				} else if (teamascore === 0 && teambscore === 0 && !ifks) {
					return "未开始"
				} else {
					return teamascore + ' : ' + teambscore
				}
			},
			//是否启用订阅按钮
			showSubscription(starttime, subscription) {
				//获取当前时间
				const attimestamp = BigInt(new Date().getTime().toString())
				//取比赛时间
				const starttimetamp = BigInt(new Date(starttime).getTime())
				//当前时间是否大于比赛时间
				const ifks = attimestamp > starttimetamp
				if (subscription) {
					return true
				} else {
					return ifks
				}
			},
			//一级导航点击事件
			clickTopLevel(item) {
				this.topLevelId = item.id
				//当点击所有
				if (item.id === 0) {

					this.getTwoLevelList()
				} else {
					//获取所属二级分类数据
					this.getSubordinatelList()
				}

			},
			//二级导航点击事件
			clickTwoLevel(item) {
				this.twoLevelId = item.id
				//获取距离现在日期最近的赛程信息
				this.getLatelySchedule()
			},
			//获取一级分类数据 
			getTopLevelList() {
				getTopLevelListApi().then(res => {
					if (res.code === 1) {
						this.topLevel = res.data
						this.topLevel.unshift({
							name: '所有',
							id: 0
						})
					} else {
						uni.$u.toast('获取数据失败,请联系管理员')
					}
				})
			},
			//获取二级分类数据 
			getTwoLevelList() {
				getTwoLevelListApi().then(res => {
					if (res.code === 1) {
						this.twoLevel = res.data
						this.twoLevel.unshift({
							name: '所有',
							id: 0
						})
						//获取距离现在日期最近的赛程信息
						this.getLatelySchedule()
					} else {
						uni.$u.toast('获取数据失败,请联系管理员')
					}
				})
			},
			//获取传入一级分类的下级分类数据
			getSubordinatelList() {
				getSubordinatelListApi(this.topLevelId).then(res => {
					if (res.code === 1) {
						this.twoLevel = res.data
						this.twoLevel.unshift({
							name: '所有',
							id: 0
						})
						//获取距离现在日期最近的赛程信息
						this.getLatelySchedule()
					} else {
						uni.$u.toast('获取数据失败,请联系管理员')
					}
				})
			},
			//获取距离现在日期最近的赛程信息
			getLatelySchedule() {
				getLatelyScheduleApi({
					topLevelId: this.topLevelId,
					twoLevelId: this.twoLevelId
				}).then(res => {
					//初始化查询变量
					this.ifBottomRefresh = false
					this.ispulldata = true
					this.reachHttpPagePar.pageNum = 1
					this.reachHttpPagePar.conditionalList = []
					this.pullHttpPagePar.pageNum = 0
					this.pullHttpPagePar.conditionalList = []
					this.matchdata = []
					if (res.code === 1) {
						this.starttime = res.data.starttime
						this.getReachData()
					} else {
						uni.$u.toast('当前分类下没有比赛数据')
					}
				})
			},
			//获取比赛数据
			getReachData() {
				const ifdisable = {
					key: 0,
					value: {
						fieldName: "ifdisable",
						fieldValue: "1",
						cSharpTypeName: "int",
						conditionalType: 0
					}
				}
				this.reachHttpPagePar.conditionalList.push(ifdisable)
				const matchstarttime = {
					key: 0,
					value: {
						fieldName: "starttime",
						fieldValue: this.starttime,
						cSharpTypeName: "DateTime",
						conditionalType: 3
					}
				}
				this.reachHttpPagePar.conditionalList.push(matchstarttime)
				if (this.topLevelId !== 0 && this.twoLevelId === 0) {
					const temp = {
						key: 0,
						value: {
							fieldName: "firstLevelClassid",
							fieldValue: this.topLevelId + '',
							cSharpTypeName: "long",
							conditionalType: 0
						}
					}
					this.reachHttpPagePar.conditionalList.push(temp)
				}
				if (this.twoLevelId !== 0) {
					const temp = {
						key: 0,
						value: {
							fieldName: "twoLevelClassid",
							fieldValue: this.twoLevelId + '',
							cSharpTypeName: "long",
							conditionalType: 0
						}
					}
					this.reachHttpPagePar.conditionalList.push(temp)
				}
				getLeadingMatchPageListApi(this.reachHttpPagePar).then(res => {
					if (res.code == 1) {
						// console.log(res.data.data)
						this.matchdata.push(...res.data.data)
						this.status = "more"
					} else {
						this.status = "noMore"
					}
					this.reachHttpPagePar.conditionalList = []
				})

			},
			//下拉获取数据的函数
			getPullData() {
				const ifdisable = {
					key: 0,
					value: {
						fieldName: "ifdisable",
						fieldValue: "1",
						cSharpTypeName: "int",
						conditionalType: 0
					}
				}
				this.pullHttpPagePar.conditionalList.push(ifdisable)
				const matchstarttime = {
					key: 0,
					value: {
						fieldName: "starttime",
						fieldValue: this.starttime,
						cSharpTypeName: "DateTime",
						conditionalType: 4
					}
				}
				this.pullHttpPagePar.conditionalList.push(matchstarttime)
				if (this.topLevelId !== 0 && this.twoLevelId === 0) {
					const temp = {
						key: 0,
						value: {
							fieldName: "firstLevelClassid",
							fieldValue: this.topLevelId + '',
							cSharpTypeName: "long",
							conditionalType: 0
						}
					}
					this.pullHttpPagePar.conditionalList.push(temp)
				}
				if (this.twoLevelId !== 0) {
					const temp = {
						key: 0,
						value: {
							fieldName: "twoLevelClassid",
							fieldValue: this.twoLevelId + '',
							cSharpTypeName: "long",
							conditionalType: 0
						}
					}
					this.pullHttpPagePar.conditionalList.push(temp)
				}
				getLeadingMatchPageListApi(this.pullHttpPagePar).then(res => {
					if (res.code == 1) {
						res.data.data.forEach(temp => {
							this.matchdata.unshift(temp)
						})
						uni.stopPullDownRefresh()
					} else {
						this.ispulldata = false
						uni.stopPullDownRefresh()
					}
					this.pullHttpPagePar.conditionalList = []
				})

			},
			//管理员设置比赛
			setupClick(matchitem) {
				if (IsLogin()) {
					const rolecode = this.$store.getters.getUserInfo.rolecode
					if (rolecode === "admin") {
						this.modalshow = true
						this.updateFractionForm.id = matchitem.id
						this.updateFractionForm.teamascore = matchitem.teamascore
						this.updateFractionForm.teambscore = matchitem.teambscore
						this.tempmatchitem = matchitem
					}
				}
			},
			//modal点击确定
			modalConfirm(){
				updateFractionApi(this.updateFractionForm).then(res => {
					if (res.code === 1) {
						this.tempmatchitem.teamascore = this.updateFractionForm.teamascore
						this.tempmatchitem.teambscore = this.updateFractionForm.teambscore
					}
					this.modalshow = false
				})
			},
			//modal点击关闭
			modalCancel(){
				this.modalshow = false
				this.updateFractionForm.index = 0
				this.updateFractionForm.id = 0
				this.updateFractionForm.teamascore = 0
				this.updateFractionForm.teambscore = 0
				this.tempmatchitem = {}
			},
			//页面触底函数
			onReachBottom() {
				this.ifBottomRefresh = true
				if (this.status != 'noMore') {
					this.status = 'loading'
					this.reachHttpPagePar.pageNum++
					this.getReachData()
				} else {
					this.status = "noMore"
				}
			},
			//下拉刷新
			onPullDownRefresh() {
				if (this.ispulldata) {
					this.pullHttpPagePar.pageNum++
					//下拉获取数据的函数
					this.getPullData()
				} else {
					uni.stopPullDownRefresh()
				}
			},
			// 发送给朋友
			onShareAppMessage() {
				return {
					title: '专业的女性赛事信息小程序', // 标题
					path: '/pages/index/index', // 要分享的页面
					imageUrl: 'https://api.femacise.cn/ico/logo.png' // 分享时的图片
				}
			},
			// 分享到朋友圈
			onShareTimeline() {
				return {
					title: '专业的女性赛事信息小程序',
					path: '/pages/index/index',
					imageUrl: 'https://api.femacise.cn/ico/logo.png'
				}
			},
			subscriptionClick(index, matchindex, starttime, id) {
				// 获取当前时间
				const now = new Date()
				// 计算当前时间加上30分钟后的时间
				const plus30mins = new Date(now.getTime() + 30 * 60000)
				// 将日期时间字符串转换为Date对象
				const matchtime = new Date(starttime);
				if (plus30mins >= matchtime) {
					uni.$u.toast("比赛已经结束或者已经快开始不能订阅")
					return
				}
				//获取4天以后的时间
				let currentDate = new Date(); // 获取当前时间
				currentDate.setDate(currentDate.getDate() + 4) // 增加4天
				const attimestamp = BigInt(currentDate.getTime().toString())
				//取比赛时间
				const starttimetamp = BigInt(new Date(starttime).getTime())
				if (starttimetamp > attimestamp) {
					uni.$u.toast("不能订阅4天以后的比赛")
					return
				}
				if (!IsLogin()) {
					uni.$u.toast("你没有登录,不能订阅,请登录")
					return
				}
				getTemplateIdApi().then(res => {
					if (res.code == 1) {
						const tempid = res.data.templateid
						const that = this
						wx.requestSubscribeMessage({ // 调起消息订阅界面
							tmplIds: [tempid],
							success(res) {
								createdSendMessageApi({
									matchid: id
								}).then(resmsg => {
									if (resmsg.code == 1) {
										that.matchdata[index].children[matchindex].subscription =
											true
										uni.$u.toast("订阅成功")
									} else {
										uni.$u.toast("订阅失败:" + resmsg.msg)
									}
								})
							},
							fail(er) {
								uni.$u.toast("获取授权失败,订阅失败")
							}
						})
					} else {
						uni.$u.toast("获取模板ID失败")
					}
				})

			}
		},
		created() {},
		onLoad() {
			//获取一级分类
			this.getTopLevelList()
			//获取二级分类
			this.getTwoLevelList()
			const today = new Date()
			const year = today.getFullYear()
			const month = (today.getMonth() + 1).toString().padStart(2, "0")
			const day = today.getDate().toString().padStart(2, "0")
			this.currentdate = `${year}年${month}月${day}日`

		}
	}
</script>

<style>
	page {}

	.test {
		width: 100%;
		text-align: center;
	}

	.imgcenter {
		display: flex;
		/*设置显示样式**/
		align-items: center;
		/**子view垂直居中*/
		vertical-align: center;
		/**垂直居中*/
		justify-content: center;
		/**内容居中*/
		flex-direction: row;
	}

	.notDo {
		margin-top: 25rpx;
	}

	.matchName {
		font-size: 14;
		color: #000000;
	}

	.matchTime {
		font-size: 14;
		color: #909399;
		margin-right: 20rpx;
	}

	.matchbox {
		height: 300rpx;
	}

	.matchtitle {
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.matchContent {
		height: 220rpx;
		display: flex;
		justify-content: space-evenly;
		margin-top: 40rpx;
		/* align-items: center; */
	}

	.tvIcon {
		align-items: center;
		text-align: center;
	}

	.upIcon {
		width: 200rpx;
		display: flex;
		justify-content: space-evenly;
	}

	.tipnotstart {
		text-align: center;
		width: 100rpx;
		margin-left: 20rpx;
		color: rgba(59, 206, 150, 1);
		border: 1px solid rgba(59, 206, 150, 1);
		border-radius: 5px;
	}

	.tipstart {
		text-align: center;
		width: 100rpx;
		margin-left: 20rpx;
		color: rgba(204, 51, 51, 1);
		border: 1px solid rgba(204, 51, 51, 1);
		border-radius: 5px;
	}

	.textimg {
		margin: 20rpx auto 0;
	}

	.matchimg {
		margin: 0 auto;
	}

	.tvImg {
		margin: -4rpx -20rpx 0 0;


	}

	.middleImg {
		display: flex;
	}

	.channel {
		border-radius: 50px;
		height: 45rpx;
		line-height: 45rpx;
		width: 160rpx;
		background-color: rgba(45, 52, 79, 1);
		color: #fff;
		font-size: 15;
	}

	.game-item {
		padding: 20px 0;
		background-color: #FFFFFF;
	}

	.video-icon {
		display: flex;
		justify-content: center;
	}

	.video-icon-content {
		padding: 8px 15px;
	}
</style>